<template>
  <div class="rollContainer">
    <div class="searchHead" ref="searchHead">
      <!-- <Form ref="formInline" :model="conditions" inline :label-width="100" :show-message="false">
        <div class="searchBox">
          <div class="conditionBox">
            <Row>
              <Col :span="6">
                <FormItem label="选择类型：">
                  <Select v-model="conditions.by" clearable @on-change="chooseType($event, 'by')">
                    <Option
                      v-for="item in statusList"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="文章分类：">
                  <Select
                    v-model="conditions.categoryId"
                    clearable
                    @on-change="changeStatus($event, 'categoryId')"
                  >
                    <Option
                      v-for="item in categoryList"
                      :value="item.categoryId"
                      :key="item.categoryId"
                    >{{ item.categoryName }}</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
          </div>
          <div class="searchBtnBox">
            <Button type="primary" @click="search()">搜索</Button>
            <Button @click="handleReset()">重置</Button>
          </div>
        </div>
      </Form>-->
      <div class="tableBtnBox">
        <Button icon="md-add" size="default" @click="addMeeting">添加会议</Button>
      </div>
    </div>
    <Table :columns="columns1" :height="tableHeight" border :data="list" :loading="loading">
      <template slot-scope="{ row }" slot="start_time">
        <span>{{row.start_time|dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
      <template slot-scope="{ row }" slot="end_time">
        <span>{{row.end_time|dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <span class="tableBtn" @click="show(row)">
          <Icon size="18" type="ios-create-outline" />编辑
        </span>
        <!-- <span class="tableBtn" @click="remove(row.id)">
          <Icon size="18" type="ios-trash" />删除
        </span>-->
      </template>
      <template slot-scope="{ row }" slot="status">
        <i-switch
          v-model="row.status"
          true-value="1"
          false-value="0"
          size="small"
          @on-change="change($event,row)"
        />
      </template>
    </Table>
    <div class="pageBox">
      <!-- <Page
        :total="total"
        :page-size="pageSize"
        :current="page"
        size="small"
        show-total
        show-sizer
        @on-change="changePage"
        @on-page-size-change="changeSize"
      /> -->
    </div>
    <Modal v-model="isAdd" title="会议编辑/发布" width="1000">
      <Form
        ref="formInline"
        :model="formInline"
        :rules="ruleInline"
        inline
        :label-width="100"
        fullscreen
      >
        <FormItem prop="miceName" label="会议标题">
          <Input
            type="text"
            v-model.trim="formInline.miceName"
            placeholder="请输入会议标题"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="about" label="会议主题">
          <Input
            type="text"
            v-model.trim="formInline.about"
            placeholder="请输入会议主题"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="address" label="会议地址">
          <Input
            type="text"
            v-model.trim="formInline.address"
            placeholder="请输入会议地址"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem label="会议开始时间" prop="start_time">
          <DatePicker
            type="datetime"
            v-model="formInline.start_time"
            @on-change="changeDate($event, 'start_time')"
            placement="bottom-end"
            placeholder="请选择开始时间"
          ></DatePicker>
        </FormItem>
        <FormItem label="会议结束时间" prop="end_time">
          <DatePicker
            type="datetime"
            v-model="formInline.end_time"
            @on-change="changeDate($event, 'end_time')"
            placement="bottom-end"
            placeholder="请选择结束时间"
          ></DatePicker>
        </FormItem>
        <FormItem label="展会名称：" prop="parentId">
          <Select
            v-model="formInline.parentId"
            clearable
            @on-change="checkStatus($event, 'parentId')"
          >
            <Option v-for="item in mices" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="sort" label="排序值">
          <Input
            type="text"
            v-model.trim="formInline.sort"
            placeholder="请输入排序值"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem prop="ticket" label="	总门票数">
          <InputNumber v-model="formInline.ticket" style="width：300px"></InputNumber>
        </FormItem>
        <FormItem prop="ticket_limit" label="个人限购门票数">
          <InputNumber v-model="formInline.ticket_limit" style="width：300px"></InputNumber>
        </FormItem>
        <FormItem prop="image" label="封面图">
          <upload
            limit="1"
            @uploadImg="uploadImg($event,'image',multiple=false)"
            @getImgUrl="getImgUrl($event, 'image')"
            :imgs="formInline.image"
          ></upload>
        </FormItem>
        <FormItem prop="articleId" label="绑定文章">
          <Input
            type="text"
            v-model.trim="formInline.articleId"
            placeholder="请输入绑定文章的id"
            style="width:300px"
          ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="isAdd=false">取消</Button>
        <Button type="primary" @click="ok('formInline')">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { miceList, modifyMice, addMice, setMice } from "../../api/exhibitors";
import wangEditor from "@/components/wangEditor.vue";
import upload from "@/components/upload.vue";
export default {
  components: {
    wangEditor,
    upload
  },
  data() {
    const _ValidateNum = (rule, value, callback) => {
      if (value * 1 >= 0 && value) {
        callback();
      } else {
        return callback(new Error("必填项"));
      }
    };
    return {
      limit: 1, //允许上传的数量
      categoryList: [], //分类列表或者标签列表
      categoryLists: [], //分类列表
      list: [],
      mices: [], //展会列表
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      conditions: {
        categoryId: "",
        by: ""
      },
      statusList: [
        {
          value: "category",
          label: "分类查找"
        }
      ],
      columns1: [
        {
          title: "id",
          key: "miceId",
          align: "center",
          minWidth: 200
        },
        {
          title: "会议标题",
          key: "miceName",
          align: "center",
          minWidth: 280
        },
        {
          title: "会议主题",
          key: "about",
          align: "center",
          minWidth: 280
        },
        {
          title: "开始时间",
          slot: "start_time",
          align: "center",
          minWidth: 200
        },
        {
          title: "结束时间",
          slot: "end_time",
          align: "center",
          minWidth: 200
        },
        {
          title: "展会名称",
          key: "parentName",
          align: "center",
          minWidth: 280
        },
        {
          title: "操作",
          slot: "action",
          width: 200,
          align: "center"
        },
        {
          title: "是否隐藏",
          slot: "status",
          align: "center",
          minWidth: 150
        }
      ],
      tableHeight: 100,
      isAdd: false,
      isFixed: false,
      username: "",
      miceId: "", //展会id
      formInline: {
        miceName: "",
        about: "",
        address: "",
        start_time: "",
        end_time: "",
        sort: "",
        image: "",
        parentId: "",
        articleId: "",
        ticket: 0,
        ticket_limit: 0
      },
      ruleInline: {
        miceName: [
          {
            required: true,
            message: "请输入会议标题",
            trigger: "blur"
          }
        ],
        about: [
          {
            required: true,
            message: "请输入会议主题",
            trigger: "blur"
          }
        ],
        ticket: [
          {
            required: true,
            validator: _ValidateNum,
            trigger: "change"
          }
        ],
        ticket_limit: [
          {
            required: true,
            validator: _ValidateNum,
            trigger: "change"
          }
        ],
        parentId: [
          { required: true, message: "请选择展会名称", trigger: "change" }
        ],
        categoryId: [
          { required: true, message: "请选择文章分类", trigger: "change" }
        ]
      }
    };
  },
  created() {
    // this.getcategoryList();
    this.getmiceList(0);
    this.getmiceList(1);
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - this.$refs.searchHead.offsetHeight - 220;
    });
  },
  methods: {
    change(e, row) {
      this.$Modal.confirm({
        title: "警告",
        content: `确认要更新显示状态？（打开默认隐藏）`,
        onOk: () => {
          setMice({ miceId: row.miceId, status: e }).then(res => {
            if (res.status) {
              this.$Message.success("修改成功");
            } else {
              if (e == 1) {
                row.status = "0";
              } else {
                row.status = "1";
              }
              this.$Message.error(res.msg);
            }
          });
        },
        onCancel: () => {
          if (e == 1) {
            row.status = "0";
          } else {
            row.status = "1";
          }
        }
      });
    },
    changeDate(e, name) {
      this.formInline[name] = e;
    },
    checkStatus(e, name) {
      this.formInline[name] = e;
    },
    // 上传文件
    uploadImg(imgs, k, multiple) {
      console.log(imgs, k, multiple);
      if (multiple) {
        this.formInline[k] = JSON.parse(imgs);
      } else {
        this.formInline[k] = JSON.parse(imgs)[0];
      }
    },
    //从组建获取图片路径
    getImgUrl(e, img) {
      this.formInline[img] = e[0];
      this.$refs["formInline"].validate(valid => {});
    },
    checkStatus(e, name) {
      this.formInline[name] = e;
    },
    changeStatus(e, name) {
      this.page = 1;
      this.conditions[name] = e;
      this.getmiceList(1);
    },
    getmiceList(type) {
      if (type == 1) {
        this.loading = true;
      }
      //文章列表
      const { page, pageSize } = this;
      miceList(
        Object.assign(this.conditions, { page: page - 1, pageSize, type })
      ).then(res => {
        if (res.status) {
          if (type == 1) {
            this.total = res.data.count;
            this.list = res.data.list;
            this.loading = false;
          } else {
            this.mices = res.data.list.map(e => {
              return {
                value: e.miceId,
                label: e.miceName
              };
            });
          }
        } else {
          this.$Message.error(res.msg);
          this.loading = false;
        }
      });
    },
    show(row) {
      this.miceId = row.miceId;
      this.formInline = {
        miceName: row.miceName,
        about: row.about,
        address: row.address,
        start_time: this.$moment
          .unix(Number(row.start_time))
          .format("YYYY-MM-DD HH:mm:ss"),
        end_time: this.$moment
          .unix(Number(row.end_time))
          .format("YYYY-MM-DD HH:mm:ss"),
        sort: row.sort,
        image: row.image,
        parentId: row.parentId,
        articleId: row.articleId,
        ticket: Number(row.ticket),
        ticket_limit: Number(row.ticket_limit)
      };
      this.isAdd = true;
    },
    changePage(e) {
      this.page = e;
      this.getmiceList(1);
    },
    changeSize(e) {
      this.page = 1;
      this.pageSize = e;
      this.getmiceList(1);
    },
    addMeeting() {
      this.miceId = ""; //展会id
      this.formInline = {
        miceName: "",
        about: "",
        start_time: "",
        end_time: "",
        image: "",
        sort: "",
        parentId: "",
        address: "",
        articleId: "",
        ticket: 0,
        ticket_limit: 0
      };
      this.isAdd = true;
    },
    ok(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          const {
            miceName,
            about,
            start_time,
            end_time,
            sort,
            image,
            parentId,
            address,
            articleId,
            ticket,
            ticket_limit
          } = this.formInline;
          let s_time = Math.round(
            new Date(start_time).getTime() / 1000
          ).toString();
          let e_time = Math.round(
            new Date(end_time).getTime() / 1000
          ).toString();
          if (this.miceId == "") {
            addMice({
              miceName,
              about,
              start_time: s_time,
              end_time: e_time,
              image,
              sort,
              address,
              parentId,
              articleId,
              ticket,
              ticket_limit,
              type: 1
            }).then(res => {
              if (res.status) {
                this.isAdd = false;
                this.$refs[name].resetFields();
                this.getmiceList(1);
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            });
          } else {
            modifyMice({
              miceName,
              about,
              start_time: s_time,
              end_time: e_time,
              image,
              address,
              sort,
              articleId,
              parentId,
              ticket,
              ticket_limit,
              miceId: this.miceId,
              type: 1
            }).then(res => {
              if (res.status) {
                this.isAdd = false;
                this.$refs[name].resetFields();
                this.getmiceList(1);
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            });
          }
        } else {
        }
      });
    },
    cancel() {
      this.isAdd = false;
    },
    editorChange(e) {},
    search() {
      this.getmiceList(1);
    },
    handleReset() {
      this.conditions = {
        categoryId: "",
        by: ""
      };
      this.page = 1;
      this.getmiceList(1);
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
/deep/.ivu-input-number {
  width: 300px;
}
</style>
